<!--
 * @Descripttion: (OP80 当前实时料架信息 )
 * @Author: (admin)
 * @Date: (2025-04-28)
-->

<template>
    <div class="shelf-cell"
        style="display: flex;flex: 1;flex-direction: column; background-color: #f4f4f4;border-radius: 10px;">

        <div style="display: flex;flex: 1;overflow: hidden; flex-direction: column;    z-index: 1;">
            <div v-if="false" style="margin-top: 20px;margin-left: 20px;">
                <el-radio-group v-model="showType">
                    <el-radio-button label="工装编号" :value="1" />
                    <el-radio-button label="位置编号" :value="2" />

                </el-radio-group>
            </div>
            <moldposition  ref="ref1" :cells="cells1" :show-type="showType" :title="title1" style="display: flex;flex: 1;" />
            <moldposition  ref="ref2" :cells="cells2" :show-type="showType" :title="title2" style="display: flex;flex: 1;" />
          
        </div>


    </div>
</template>

<script setup name="currentShelf">
import moldposition from './components/moldPosition.vue'

const { proxy } = getCurrentInstance()
const SR = proxy.signalr.SR
import {
    GetShelfData
}
    from '@/api/business/dcop80record.js'
const showType = ref(1)
const ref1 = ref()
const ref2 = ref()

const title1 = ref('左钎焊料架')
const title2 = ref('右钎焊料架')
//定时器每秒获取
const timer = setInterval(() => {

    queryData()
   

}, 1000*1);

onMounted(()=>{
    queryData()
})

// 在组件卸载时清除定时器
onUnmounted(() => {
    clearInterval(timer);
});

const defaultCells = ()=>{
  return  Array.from({ length: 243 }, (_, i) => {
            const cellId = i + 1;
            const group = Math.floor((cellId - 1) / 81) + 1;
            const layer = Math.floor(((cellId - 1) % 81) / 9) + 1;
            const position = (cellId - 1) % 9 + 1;

            let status = 0;
            
            return {
                cellId: cellId,
                status: status,
                fixtureId: status !== 0 ? `${cellId}` : ''
            }
        })
}

const cells1 = reactive(defaultCells())
const cells2 = reactive(defaultCells())
const queryData = ()=>{
    try {
        GetShelfData().then(res => {
            const { code, data } = res
            if (code == 200) {
                if (data.dataL.length > 0&& data.dataL[0].shelfId>0) {
                    title1.value = `左钎焊料架-${data.dataL[0].shelfId}`
                }
                if (data.dataR.length > 0 && data.dataR[0].shelfId>0) {
                    title2.value = `右钎焊料架-${data.dataR[0].shelfId}`
                }

                
                // 替换整个数组内容
                cells1.splice(0, cells1.length, ...data.dataL)
                cells2.splice(0, cells2.length, ...data.dataR)
                //ref1.value.UpdateUIData(data.dataL)
                //ref2.value.UpdateUIData(data.dataR)
            }
        })

    } catch (error) {

    }
}


</script>

<style lang='scss' scoped>
.shelf-cell {
    position: relative;
    z-index: 0;
    /* 确保在内容下方 */
}

/* 虚线背景效果 */
.shelf-cell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v1H0V0zm2 2h1v1H2V2zm2-2h1v1H4V0zm0 4h1v1H4V4z' fill='currentColor' fill-opacity='0.3'/%3E%3C/svg%3E");
    background-size: 6px 6px;
    opacity: 0.5;
}
</style>